<template>
    <div class="channel">
        <div class="header">
            <el-input v-model="level1_title" placeholder="请输入一级渠道名称" class="search-item"></el-input>
            <el-input v-model="level2_title" placeholder="请输入二级渠道名称" class="search-item"></el-input>
            <el-input v-model="level3_title" placeholder="请输入三级渠道名称" class="search-item"></el-input>
            <div class="search-button">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="add-button">
            <el-button type="primary" @click="addWay">新增一级渠道</el-button>
        </div>
        <el-table
    :data="tableData"
    v-loading="loading"
    style="width: 100%;margin-bottom: 20px;"
    :expand-row-keys="expands"
    row-key="id"
    :tree-props="{children: 'channels'}">
    <el-table-column
      prop="title"
      label="渠道名称"
  >
    </el-table-column>
    <el-table-column
      prop="name"
      label="是否显示"
      >
      <template slot-scope="scope">
        <el-switch
  v-model="scope.row.is_show"
   :active-value="1"
    :inactive-value="0"
    @change="changeIsshow(scope.row.id,scope.row.is_show,scope.row.parent_channel_id,scope.row.top_channel_id)"
  >
</el-switch>
      </template>
    </el-table-column>
    <el-table-column
      prop="order_value"
      label="排序">
    </el-table-column>
    <el-table-column
      prop="update_time"
      label="最近修改时间">
    </el-table-column>
    <el-table-column
      prop="updator"
      label="最近修改人">
    </el-table-column>
    <el-table-column
      fixed="right"
      width="300"
      label="操作">
      <template slot-scope="scope">
        <el-button    type="text" @click="viewDetail(scope.row)">查看</el-button>
        <el-button    type="text" @click="changeChannel(scope.row)">修改</el-button>
        <el-button    type="text" @click="addChannel(scope.row)" v-if="scope.row.code.length<=6">新增子渠道</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog :title="diaTtitle" :visible.sync="dialogFormVisible" width="480px" append-to-body  @close="initDia" destroy-on-close>
    <addChannel :level="level" :changeItem="changeItem" :isAdd="isAdd" :isView="isView" @success="refresh" @cancel="cancel"></addChannel>
</el-dialog>
    </div>
</template>
<script>
import addChannel from './addChannel'
import { getChannels,changeVisibility } from '@/api/channel.js'
export default {
    components:{
        addChannel
    },
    data() {
        return {
          loading:true,
          level:1,
          changeItem:'',
          expands:[],
            dialogFormVisible:false,
            diaTtitle:'新增一级渠道',
            level1_title:'',
            level2_title:'',
            level3_title:'',
            tableData:[],
            isAdd:true,
            isView:false 
        }
    },
    methods: {
     changeIsshow(a,b,c,d){
        console.log(c)
        let obj={
          id:a,
          is_show:b
        }
        changeVisibility(obj).then(res=>{
          this.$message.success('修改成功')
          this.init()
          this.expands.push(String(c))
          this.expands.push(String(d))
          this.expands=[...new Set(this.expands)]
        })
      },
      cancel(){
        this.level=1
        this.changeItem=''
        this.dialogFormVisible=false
      },
      refresh(e,f){              
        this.dialogFormVisible=false
        this.init()
        this.expands.push(String(e))
        this.expands.push(String(f))
        this.expands=[...new Set(this.expands)]
      },
      initDia(){
        this.level=1
        this.changeItem=''
        this.isView=false
      },
      viewDetail(e){
        this.isAdd=false
        if(e.code.length==3){
          this.level=1
           this.diaTtitle='查看一级渠道'
        } 
        else if(e.code.length==6){
          this.level=2
          this.diaTtitle='查看二级渠道'
        }
        else {
          this.level=3
           this.diaTtitle='查看三级渠道'
        }
        this.changeItem=e.id
        this.dialogFormVisible=true
        this.isView=true
      },
      addChannel(e){
        this.isView=false
        this.isAdd=true
        this.changeItem=e.id
        if(e.code.length==3){
          this.level=2
          this.diaTtitle='新增二级渠道'
        } 
        else if(e.code.length==6){
          this.level=3
          this.diaTtitle='新增三级渠道'
        }
        else {
          this.level=1
          this.diaTtitle='新增一级渠道'
        }
        this.dialogFormVisible=true
      },
      changeChannel(e){
        this.isAdd=false
        this.isView=false
        if(e.code.length==3){
          this.level=1
           this.diaTtitle='修改一级渠道'
        } 
        else if(e.code.length==6){
          this.level=2
          this.diaTtitle='修改二级渠道'
        }
        else {
          this.level=3
           this.diaTtitle='修改三级渠道'
        }
        this.changeItem=e.id
        this.dialogFormVisible=true
      },
     search(){
        this.init()
      },
      reset(){
        this.level1_title=''
        this.level2_title=''
        this.level3_title=''
        this.init()
      },
        addWay(){
            this.dialogFormVisible=true
        },
      init(){
          this.expands=[]
          this.tableData=[]
          this.loading=true
          getChannels({
            level1_title:this.level1_title,
            level2_title:this.level2_title,
            level3_title:this.level3_title,
          }).then(res=>{
            this.tableData=res.data
            if(this.level2_title){
              this.tableData.forEach(ele => {
                  this.expands.push(String(ele.id))
              });
            }
            if(this.level3_title){
              this.tableData.forEach(ele => {
                this.expands.push(String(ele.id))
                ele.channels.forEach(el => {
                  this.expands.push(String(el.id))
                });
              });
            }
            this.loading=false
          })
        }
    },
    created() {
      this.init()
    }
}
</script>
<style lang="scss" scoped>
.channel{
 margin: 20px;
 .header{
    display: flex;
    justify-content: flex-start;
    align-self: center;
    flex-wrap: wrap;
    min-height: 30px;
    .search-item{
        width: 300px;
        margin-right: 30px;
        margin-bottom: 5px;
    }
    .search-button{
        width: 200px;
        justify-content: space-between;
    }
 }
 .add-button{
 padding-top: 5px;
 padding-bottom: 10px;
 }
}
    
</style>